<template>
      
        <div class="index">		   
            <el-container>
                <!-- 导航栏菜单 -->
                <el-aside>                     
                    <el-menu :default-openeds="['1','2']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>导航一</template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1">选项1</el-menu-item>
                                <el-menu-item index="1-2">选项2</el-menu-item>
                                <el-menu-item index="1-3">选项3</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title"><i class="el-icon-message"></i>导航二</template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1">选项1</el-menu-item>
                                <el-menu-item index="1-2">选项2</el-menu-item>
                                <el-menu-item index="1-3">选项3</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>                       
                </el-aside>
                <!-- 走马灯部分 -->
                <el-main>
                    <!-- 走马灯 -->                                          
                    <el-carousel trigger="click" height="449px">
                        <el-carousel-item v-for="imgurl in hotImgList" :key="imgurl">
                        <el-image
                            :src="imgurl"
                            ></el-image>
                        </el-carousel-item>
                    </el-carousel>                  
                </el-main>
            </el-container>
            


            <div class="main">
                <div class="content">
                    <div class="content_top">
                        <div class="heading">
                        <h3>为您推荐</h3>
                        </div>
                    </div>
                    <div class="section group">
                        <div class="grid_1_of_5 images_1_of_5" v-for="rec in recommenders" :key="rec.id">
                            <router-link :to="{path:'movieview',query: {movieId: rec.id}}"><el-image :src="rec.url"></el-image></router-link>
                            <router-link :to="{path:'movieview',query: {movieId: rec.id}}">{{rec.title}}</router-link>
                            <el-rate
                                v-model="rec.rate" 	
                                disabled
                                show-score
                                text-color="#ff9900"
                                score-template="{value}">
                            </el-rate>
                                
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    推荐是因为您曾看过<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>减少推荐相关内容</el-dropdown-item>
                                <el-dropdown-item>我很满意</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <br>
                            <router-link :to="{path:'movieview',query: {movieId: rec.id}}">{{rec.reason}}</router-link>                        
                        </div>
                    </div>

                    <div class="content_bottom">
                        <div class="heading">
                            <h3>热门电影</h3>
                        </div>
                    </div>
                    <div class="section group">
                        <div class="grid_1_of_5 images_1_of_5" v-for="hot in hotmovie" :key="hot.id">
                            <router-link :to="{path:'movieview',query: {movieId: hot.id}}"><el-image :src="url"></el-image></router-link>
                            <router-link :to="{path:'movieview',query: {movieId: hot.id}}">{{hot.title}}</router-link>
                            <!-- <h2><a @click="show"></a></h2> -->
                            <el-rate
                            v-model="hot.rating" 	
                            disabled
                            show-score
                            text-color="#ff9900"
                            score-template="{value}">
                            </el-rate>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
</template>

<script>
export default {
    name: 'index',  
    created(){
        this.getHotMovie();
    },
    data(){
        return{
            url:require('../assets/images/end-game.jpg'),
            hotImgList:[
               require('../assets/images/1.jpg'),
               require('../assets/images/2.jpg'),
               require('../assets/images/3.jpg'),
               require('../assets/images/4.jpg'),
               require('../assets/images/5.jpg'),
            ],
            recommenders:[
                {id: 1,title: "end game",url: require('../assets/images/end-game.jpg'),rate: 3.8,reason: "ggg"},
                {id: 2,title: "Sorority_Wars",url: require('../assets/images/end-game.jpg'),rate: 4.0,reason: "ggg"},
                {id: 3,title: "end game",url: require('../assets/images/end-game.jpg'),rate: 3.8,reason: "ggg"},
                {id: 4,title: "end game",url: require('../assets/images/end-game.jpg'),rate: 3.8,reason: "ggg"},
                {id: 5,title: "end game",url: require('../assets/images/end-game.jpg'),rate: 3.8,reason: "ggg"},
                
            ],
            hotmovie:[
                {id: 1,title: "Coraline",genres:"child",rating: 5.0,introduction:"this is a good movie"},
                {id: 2,title: "Coraline",genres:"child",rating: 5.0,introduction:"this is a good movie"},
                {id: 3,title: "Coraline",genres:"child",rating: 5.0,introduction:"this is a good movie"},
                {id: 4,title: "Coraline",genres:"child",rating: 5.0,introduction:"this is a good movie"},
                {id: 5,title: "Coraline",genres:"child",rating: 5.0,introduction:"this is a good movie"},
            ],
            message:"hello",
            value:3.7,
        }
    },
    methods:{
        async getHotMovie(){
            const result=await this.$axios({
                method: 'get',
                url: 'movie/hotmovie',
            });
            this.hotmovie=result.data;
        },
        toMovieView(){
            console.log(123);
            
        }
    }
}
</script>

<style lang="less" scoped>

.index {
    padding-top: 1%;
    background-color: #eee;
	width:95%;
	margin: 0 auto;
	transition:all .2s linear;
	-moz-transition:all .2s linear;/* firefox */
	-webkit-transition:all .2s linear; /* safari and chrome */
	-o-transition:all .2s linear; /* opera */
	-ms-transition:all .2s linear;
}
.el-aside {
    padding-top: 1%;
    padding-left: 1%;
	float:left;
    width:25%;
}
.el-menu {
    border:2px solid #EEE;
    box-shadow: 0 0 10px #ddd;
}
.el-main {
    padding-top: 1%;
    padding-right: 1%;
	float:left;
	width:74%;
	padding-left:1%;
}
.el-carousel {
	border:2px solid #EEE;
}   

.content {
	padding: 20px 0;
	background: #FFF;
}
.content_top{
	padding:10px 20px;
	border: 1px solid #EBE8E8;
	background: url(../assets/images/strip-bg.gif) repeat-x #F6F6F6;
}
.content_bottom {
	padding:10px 20px;
	border: 1px solid #EBE8E8;
	background: url(../assets/images/strip-bg.gif) repeat-x #F6F6F6;
	margin-top: 2.6%;
}
.heading h3 {
	font-size:1.2em;
	color:#FC7D01;
	text-transform: uppercase;
}
.grid_1_of_5 {
	display: block;
	float: left;
	margin: 1% 0 1% 1.6%;
	box-shadow: 0px 0px 3px rgb(150, 150, 150);
	-webkit-box-shadow: 0px 0px 3px rgb(150, 150, 150);
	-moz-box-shadow: 0px 0px 3px rgb(150, 150, 150);
	-o-box-shadow: 0px 0px 3px rgb(150, 150, 150);
}
.grid_1_of_5:first-child {
	margin-left: 0;
}
.images_1_of_5 {
	width: 15.72%;
	padding:1.5%; 
	text-align: center;
	position: relative;
}
.images_1_of_5  img {
	max-width: 100%;
}
.images_1_of_5  h2  a{
	color:#888;
	padding-top:2px;
}
.images_1_of_5  p {
	font-size: 0.8125em;
	padding: 0.4em 0;
	color: #333;
}
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}
.group:before, .group:after {
	content: "";
	display: table;
}
.group:after {
	clear: both;
}
.group {
	zoom: 1;
}
</style>